<template>
  <div>
    <el-dialog title="修改选项" :visible.sync="editDialog.showDialog" width="50%">
      <div class="input-row">
        <div class="desc">选项名称：</div>
        <el-input class="option-name" v-model="editDialog.optionName"></el-input>
      </div>
      <div class="input-row">
        <div class="desc">分值：</div>
        <el-input-number
          class="option-score"
          v-model="editDialog.optionScore"
          :min="0"
          :max="maxItemScore"
        ></el-input-number>
      </div>
      <div class="input-row">
        <div class="desc">描述：</div>
        <el-input type="textarea" :rows="2" class="option-desc" v-model="editDialog.optionDesc"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditOption">确 定</el-button>
      </span>
    </el-dialog>
    <div v-for="(item, index) of targetOptionList" :key="item.id" class="option-list-wrap">
      <div class="option-wrap">
        <span class="item-name">选项：{{item.optionName}}</span>
        <span class="item-score">分值：{{item.optionScore}}</span>
        <div class="item-desc">{{item.optionDesc}}</div>
      </div>
      <div class="btn-wrap">
        <el-button
          type="primary"
          :disabled="index == 0"
          round
          size="mini"
          @click="upwardOption(item.id)"
        >上移</el-button>
        <el-button
          type="success"
          :disabled="index == (targetOptionList.length - 1)"
          round
          size="mini"
          @click="downwardOption(item.id)"
        >下移</el-button>
        <el-button type="warning" round size="mini" @click="editOption(item)">修改</el-button>
        <el-button type="danger" round size="mini" @click="deleteOption(item.id)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Dialog, Input, InputNumber } from "element-ui";
import {
  deleteScoreModelItemOption,
  upwardScoreModelItemOption,
  downwardScoreModelItemOption,
  updateScoreModelItemOption
} from "@/api/score.js";
export default {
  name: "item-option",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [InputNumber.name]: InputNumber
  },
  props: {
    optionList: Array,
    itemId: Number,
    maxItemScore: Number
  },
  data() {
    return {
      targetOptionList: [],
      editDialog: {
        showDialog: false,
        id: null,
        optionDesc: null,
        optionName: null,
        optionScore: null
      }
    };
  },
  methods: {
    upwardOption(id) {
      upwardScoreModelItemOption(id)
        .then(res => {
          this.$emit("option-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    downwardOption(id) {
      downwardScoreModelItemOption(id)
        .then(res => {
          this.$emit("option-change");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    editOption(item) {
      this.editDialog.showDialog = true;
      this.editDialog.id = item.id;
      this.editDialog.optionDesc = item.optionDesc;
      this.editDialog.optionName = item.optionName;
      this.editDialog.optionScore = item.optionScore;
    },
    submitEditOption() {
      updateScoreModelItemOption({
        id: this.editDialog.id,
        optionName: this.editDialog.optionName,
        optionScore: this.editDialog.optionScore,
        optionDesc: this.editDialog.optionDesc
      })
        .then(res => {
          this.$emit("option-change");
          this.editDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    deleteOption(id) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteScoreModelItemOption(id)
            .then(res => {
              this.$emit("option-change");
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    }
  },
  watch: {
    optionList() {
      this.targetOptionList = [];
      this.optionList.forEach(item => {
        if (item.itemId === this.itemId) {
          this.targetOptionList.push(item);
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.input-row {
  margin-bottom: 5px;

  .desc {
    position: absolute;
    width: 80px;
    line-height: 40px;
  }

  .option-name {
    margin-left: 80px;
    width: 60%;
  }

  .option-score {
    margin-left: 80px;
  }

  .option-desc {
    width: 60%;
    margin-left: 80px;
  }
}

.option-list-wrap {
  border-bottom: 2px solid #777;
  padding-left: 13px;
  padding-top: 13px;

  .option-wrap {
    font-size: 18px;
    height: 50px;

    .item-name {
      display: inline-block;
      margin-right: 40px;
    }

    .item-score {
      display: inline-block;
    }
  }

  .btn-wrap {
    visibility: hidden;
  }

  &:hover {
    background-color: #555;
    color: green;

    & .btn-wrap {
      visibility: visible;
    }
  }
}
</style>